<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getPackList } from "@/api/lsp";
import { ImagePack } from "@/api/model/lspModel";
import LongText from "@/components/ReText/src/text";

defineOptions({
  name: "ListCard",
});

const pagination = ref({ current: 1, pageSize: 12, total: 0 });
const param = ref<ImagePack>({});

const packList = ref<ImagePack[]>([]);
const dataLoading = ref(true);

const getCardListData = async () => {
  try {
    param.value = {
      ...param.value,
      current: pagination.value.current,
      size: pagination.value.pageSize,
    };
    const res = await getPackList(param.value);
    packList.value = res.records;
    pagination.value = {
      ...pagination.value,
      total: res.total,
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

onMounted(() => {
  getCardListData();
});

const formDialogVisible = ref(false);
const searchValue = ref("");

const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
  getCardListData();
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
  getCardListData();
};
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <el-button
        :icon="useRenderIcon('ri:add-circle-line')"
        @click="formDialogVisible = true"
      >
        新建产品
      </el-button>
      <el-input
        style="width: 300px"
        v-model="searchValue"
        placeholder="请输入产品名称"
        clearable
      >
        <template #suffix>
          <el-icon class="el-input__icon">
            <IconifyIconOnline
              v-show="searchValue.length === 0"
              icon="ep:search"
            />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div v-loading="dataLoading">
      <el-empty description="暂无数据" v-show="packList.length === 0" />
      <template v-if="pagination.total > 0">
        <el-row :gutter="16" class="row-box">
          <el-col
            v-for="pack in packList"
            :key="pack.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <div style="margin-bottom: 12px">
              <el-card shadow="hover" class="el-card">
                <el-image :key="pack.coverUrl" :src="pack.coverUrl" lazy />
                <div style="padding: 14px">
                  <LongText :value="pack.picTitle" :limit="20" />
                  <div class="bottom">
                    <time class="time">{{ pack.created }}</time>
                    <el-tag class="ml-2">{{ pack.tag }}</el-tag>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16" justify="center">
          <el-pagination
            class="float-right"
            v-model:currentPage="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[12, 24, 36]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </el-row>
      </template>
    </div>
  </div>
</template>
<style>
.row-box {
  display: flex;
  flex-flow: wrap;
}

.row-box .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  border: 0px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
</style>
